var Event = require('bcore/event');
var $ = require('jquery');
var _ = require('lodash');
var AMapLoader = require('@amap/amap-jsapi-loader');

/**
 * 高德地图组件
 */
module.exports = Event.extend(function AmapComponent(container, config) {
  this.config = {
    mapKey: '',
    securityKey: '',
    center: '116.397428,39.90923',
    zoom: 12,
    minZoom: 3,
    maxZoom: 18,
    mapStyle: 'satellite_with_layers',
    showBuildings: true,
    showRoadnet: true,
    theme: {}
  };
  
  this.container = $(container);           //容器
  this.apis = config.apis;                 //hook一定要有
  this._data = null;                       //数据
  this.map = null;                         //高德地图实例
  this.markers = [];                       //标记点数组
  this.init(config);
}, {
  /**
   * 公有初始化
   */
  init: function (config) {
    //1.初始化,合并配置
    this.mergeConfig(config);
    //2.刷新布局,针对有子组件的组件 可有可无
    this.updateLayout();
    //3.初始化地图
    this.initMap();
    //4.如果有需要, 更新样式
    this.updateStyle();
    //5.绑定交互事件
    this.bindEvents();
  },

  /**
   * 初始化高德地图
   */
  initMap: function () {
    var self = this;
    var cfg = this.config;
    
    // 设置容器样式
    this.container.css({
      'width': '100%',
      'height': '100%',
      'position': 'relative'
    });

    // 解析中心点坐标
    var center = [116.397428, 39.90923]; // 默认北京天安门
    if (cfg.center) {
      var centerCoords = cfg.center.split(',');
      var lng = parseFloat(centerCoords[0]);
      var lat = parseFloat(centerCoords[1]);
      if (!isNaN(lng) && !isNaN(lat)) {
        center = [lng, lat];
      }
    }

    // 设置安全密钥（2021年12月后申请的Key需要配置）
    if (cfg.securityKey) {
      window.AMapSecurityConfig = {
        securityJsCode: cfg.securityKey
      };
      console.log('已配置安全密钥');
    } else if (cfg.mapKey) {
      // 如果没有单独配置安全密钥，尝试使用mapKey作为安全密钥
      window.AMapSecurityConfig = {
        securityJsCode: cfg.mapKey
      };
      console.log('使用API Key作为安全密钥');
    }

    // 添加调试信息
    // console.log('开始加载高德地图，API Key:', cfg.mapKey || 'your_amap_api_key_here');
    // console.log('地图中心点:', center);
    // console.log('缩放级别:', cfg.zoom);

    // 加载高德地图API
    AMapLoader.load({
      key: cfg.mapKey || 'your_amap_api_key_here', // 请替换为您的真实高德地图Key
      version: '2.0',
      plugins: ['AMap.Marker', 'AMap.InfoWindow']
    }).then(function (AMap) {
      // 创建地图实例
      var layers = [];
      
      // 根据地图样式添加图层
      if (cfg.mapStyle === 'satellite' || cfg.mapStyle === 'satellite_with_layers') {
        layers.push(new AMap.TileLayer.Satellite());
        if (cfg.mapStyle === 'satellite_with_layers' && cfg.showRoadnet) {
          layers.push(new AMap.TileLayer.RoadNet());
        }
      } else if (cfg.mapStyle === 'roadnet') {
        layers.push(new AMap.TileLayer.RoadNet());
      } else {
        layers.push(new AMap.TileLayer());
      }
      
      // 使用配置中的缩放级别
      var zoom = cfg.zoom || 12;
      var minZoom = cfg.minZoom || 3;
      var maxZoom = cfg.maxZoom || 18;
      
      self.map = new AMap.Map(self.container[0], {
        center: center,
        zoom: zoom,
        layers: layers,
        viewMode: '2D',
        resizeEnable: true,
        dragEnable: true,
        zoomEnable: true,
        doubleClickZoom: true,
        keyboardEnable: true,
        scrollWheel: true,
        touchZoom: true,
        // 动态缩放级别范围
        zooms: [minZoom, maxZoom]
      });

          // 地图加载完成事件
          self.map.on('complete', function() {
            console.log('高德地图加载完成');
            
            // 如果有数据，渲染标记点
            if (self._data && self._data.length > 0) {
              self.renderMarkers(self._data[0]);
            }
            
            // 地图准备就绪
            try {
              if (typeof self.trigger === 'function') {
                self.trigger('mapReady');
              }
            } catch (e) {
              console.log('地图准备就绪事件触发失败:', e);
            }
          });

          // 地图点击事件
          self.map.on('click', function(e) {
            var lng = e.lnglat.getLng();
            var lat = e.lnglat.getLat();
            var zoom = self.map.getZoom();
            
            // 触发地图点击事件
            try {
              if (typeof self.emit === 'function') {
                self.emit('mapClick', {
                  lng: lng,
                  lat: lat,
                  zoom: zoom,
                  center: [lng, lat]
                });
              }
            } catch (e) {
              console.log('地图点击事件触发失败:', e);
            }
          });

      // 鼠标滚轮缩放事件
      self.map.on('zoomchange', function() {
        var currentZoom = self.map.getZoom();
        console.log('地图缩放级别:', currentZoom);
        
        // 更新标记点显示状态
        self.updateMarkersVisibility();
        
        try {
          if (typeof self.trigger === 'function') {
            self.trigger('zoomChange', currentZoom);
          }
        } catch (e) {
          console.log('缩放事件触发失败:', e);
        }
      });

      // 添加地图加载错误处理
      self.map.on('error', function(e) {
        console.error('地图加载错误:', e);
      });

      // 如果有数据，渲染标记点
      if (self._data && self._data.length > 0) {
        console.log('initMap: 渲染初始数据', self._data[0]);
        self.renderMarkers(self._data[0]);
      } else {
        console.log('initMap: 没有初始数据，使用默认数据');
        // 使用默认数据测试
        var defaultData = {
          markers: [
            {
              position: "116.397428,39.90923",
              title: "北京",
              content: "北京市",
              hoverInfo: "首都北京，政治文化中心"
            },
            {
              position: "121.473701,31.230416",
              title: "上海",
              content: "上海市",
              hoverInfo: "经济中心，国际化大都市"
            }
          ],
        };
        self.renderMarkers(defaultData);
      }
    }).catch(function (error) {
      console.error('高德地图加载失败:', error);
      self.container.html('<div style="padding: 20px; text-align: center; color: #999;">高德地图加载失败，请检查API Key配置</div>');
    });
  },

  /**
   * 获取地图样式
   */
  getMapStyle: function (style) {
    var styles = {
      'normal': 'normal',
      'satellite': 'amap://styles/satellite',
      'roadnet': 'amap://styles/roadnet',
      'satellite_with_layers': 'amap://styles/satellite'
    };
    return styles[style] || styles['satellite'];
  },

  /**
   * 绘制
   * @param data
   * @param options 不一定有
   */
  render: function (data, config) {
    data = this.data(data);
    var cfg = this.mergeConfig(config);
    
    // 如果地图已初始化，更新地图
    if (this.map) {
      // 检查是否有新的中心点数据
      if (data && data.length > 0 && data[0]) {
        var dataItem = data[0];
        
        // 处理中心点定位
        if (dataItem.center) {
          this.locateToPosition(dataItem);
        }
        
        // 处理缩放级别
        if (dataItem.zoom !== undefined) {
          this.setZoom(dataItem.zoom);
        }
        
        // 处理标记点
        if (dataItem.markers) {
          this.renderMarkers(dataItem);
        }
      }
      
      // 更新地图配置
      this.updateMapCenter(cfg);
    }
    
    // 如果有需要的话,更新样式
    this.updateStyle();
  },

  /**
   * 更新地图中心点
   */
  updateMapCenter: function (cfg) {
    if (cfg.center && this.map) {
      var centerCoords = cfg.center.split(',');
      var center = [parseFloat(centerCoords[0]), parseFloat(centerCoords[1])];
      
      // 验证坐标有效性
      if (!isNaN(center[0]) && !isNaN(center[1])) {
        this.map.setCenter(center);
      } else {
        console.error('无效的中心点坐标:', cfg.center);
      }
    }
    
    if (cfg.zoom && this.map) {
      var zoom = cfg.zoom;
      if (!isNaN(zoom) && zoom >= 3 && zoom <= 18) {
        this.map.setZoom(zoom);
      } else {
        console.error('无效的缩放级别:', cfg.zoom);
      }
    }
    
    // 更新缩放级别范围
    if ((cfg.minZoom || cfg.maxZoom) && this.map) {
      var minZoom = cfg.minZoom || 3;
      var maxZoom = cfg.maxZoom || 18;
      
      // 验证缩放范围
      if (isNaN(minZoom) || minZoom < 3) minZoom = 3;
      if (isNaN(maxZoom) || maxZoom > 18) maxZoom = 18;
      if (minZoom >= maxZoom) {
        minZoom = 3;
        maxZoom = 18;
      }
      
      this.map.setZooms([minZoom, maxZoom]);
    }

    if (cfg.mapStyle && this.map) {
      var layers = [];
      
      // 根据地图样式添加图层
      if (cfg.mapStyle === 'satellite' || cfg.mapStyle === 'satellite_with_layers') {
        layers.push(new AMap.TileLayer.Satellite());
        if (cfg.mapStyle === 'satellite_with_layers' && cfg.showRoadnet) {
          layers.push(new AMap.TileLayer.RoadNet());
        }
      } else if (cfg.mapStyle === 'roadnet') {
        layers.push(new AMap.TileLayer.RoadNet());
      } else {
        layers.push(new AMap.TileLayer());
      }
      
      this.map.setLayers(layers);
    }
  },

  /**
   * 渲染标记点
   */
  renderMarkers: function (data) {
    if (!this.map || !data || !data.markers) {
      console.log('renderMarkers: 条件不满足', {
        hasMap: !!this.map,
        hasData: !!data,
        hasMarkers: !!(data && data.markers)
      });
      return;
    }

    console.log('renderMarkers: 开始渲染标记点', data.markers);

    // 清除现有标记点
    this.clearMarkers();

    var self = this;
    var AMap = window.AMap;

    // 渲染所有标记点
    data.markers.forEach(function (markerData) {
      console.log('处理标记点数据:', markerData);
      self.createMarker(markerData);
    });
    
    // 根据当前缩放级别更新标记点显示
    this.updateMarkersVisibility();
  },

  /**
   * 创建标记点
   */
  createMarker: function (markerData) {
    if (!this.map) {
      console.log('createMarker: 地图未初始化');
      return;
    }
    
    console.log('createMarker: 开始创建标记点', markerData);
    
    var coords = markerData.position.split(',');
    var lng = parseFloat(coords[0]);
    var lat = parseFloat(coords[1]);
    
    console.log('原始坐标:', lng, lat);
    
    // 验证坐标有效性
    if (isNaN(lng) || isNaN(lat)) {
      console.error('无效的标记点坐标:', markerData.position);
      return;
    }
    
    // 暂时不进行坐标转换，直接使用原始坐标
    var position = [lng, lat];
    console.log('使用原始坐标:', position);
    
    var AMap = window.AMap;
    
    // 按照官方示例方式创建标记点，支持自定义尺寸
    var iconSize = markerData.size || 30;
    var iconWidth = iconSize;
    var iconHeight = Math.round(iconSize * 1.3); // 保持水滴形状比例
    
    var marker = new AMap.Marker({
      position: position,
      icon: markerData.icon || '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
      offset: new AMap.Pixel(-iconWidth/2, -iconHeight),
      title: markerData.title || '',
      extData: {
        hoverInfo: markerData.hoverInfo || markerData.title || '',
        title: markerData.title || '',
        content: markerData.content || '',
        minZoom: markerData.minZoom || 1,
        maxZoom: markerData.maxZoom || 18,
        size: markerData.size || 20
      }
    });
    
    // 如果指定了自定义尺寸，创建自定义图标
    if (markerData.icon && markerData.size) {
      try {
        var customIcon = new AMap.Icon({
          image: markerData.icon,
          size: new AMap.Size(iconWidth, iconHeight),
          imageSize: new AMap.Size(iconWidth, iconHeight)
        });
        marker.setIcon(customIcon);
        console.log('应用自定义尺寸:', iconSize, 'px');
      } catch (e) {
        console.error('自定义图标创建失败:', e);
      }
    }
    
    console.log('标记点创建完成，配置:', {
      icon: markerData.icon,
      size: markerData.size,
      minZoom: markerData.minZoom,
      maxZoom: markerData.maxZoom
    });

    // 添加鼠标悬停事件
    var self = this;
    marker.on('mouseover', function () {
      var hoverInfo = marker.getExtData().hoverInfo;
      if (hoverInfo) {
        var infoWindow = new AMap.InfoWindow({
          content: '<div style="padding: 8px; background: rgba(0,0,0,0.8); color: white; border-radius: 4px; font-size: 12px; white-space: nowrap;">' + hoverInfo + '</div>',
          offset: new AMap.Pixel(0, -40),
          closeWhenClickMap: false
        });
        infoWindow.open(self.map, position);
        marker._hoverInfoWindow = infoWindow;
      }
    });
    
    marker.on('mouseout', function () {
      if (marker._hoverInfoWindow) {
        marker._hoverInfoWindow.close();
        marker._hoverInfoWindow = null;
      }
    });

    // 添加点击事件
    if (markerData.title || markerData.content) {
      marker.on('click', function () {
        var infoWindow = new AMap.InfoWindow({
          content: '<div style="padding: 10px;"><h4>' + (markerData.title || '') + '</h4><p>' + (markerData.content || '') + '</p></div>',
          offset: new AMap.Pixel(0, -30)
        });
        infoWindow.open(self.map, position);
      });
    }

    marker.setMap(this.map);
    console.log('标记点已添加到地图:', marker);
    
    this.markers.push(marker);
    console.log('总标记点数量:', this.markers.length);
  },


  /**
   * 更新标记点显示状态
   */
  updateMarkersVisibility: function () {
    if (!this.map) return;
    
    var currentZoom = this.map.getZoom();
    console.log('updateMarkersVisibility: 当前缩放级别:', currentZoom);
    
    // 更新所有标记点的显示状态
    if (this.markers && this.markers.length > 0) {
      this.markers.forEach(function (marker) {
        var extData = marker.getExtData();
        var minZoom = extData.minZoom || 1;
        var maxZoom = extData.maxZoom || 18;
        var shouldShow = currentZoom >= minZoom && currentZoom <= maxZoom;
        
        console.log('标记点显示范围:', minZoom, '-', maxZoom, '当前缩放:', currentZoom, '应该显示:', shouldShow);
        
        if (shouldShow) {
          marker.show();
        } else {
          marker.hide();
        }
      });
    }
  },

  /**
   * 清除所有标记点
   */
  clearMarkers: function () {
    if (this.markers && this.markers.length > 0) {
      this.markers.forEach(function (marker) {
        marker.setMap(null);
      });
      this.markers = [];
    }
  },

  /**
   * 调整大小
   * @param width
   * @param height
   */
  resize: function (width, height) {
    this.updateLayout(width, height);
    if (this.map) {
      this.map.getSize();
    }
  },

  /**
   * 每个组件根据自身需要,从主题中获取颜色 覆盖到自身配置的颜色中.
   */
  setColors: function () {
    // 地图组件暂时不需要主题颜色处理
  },

  /**
   * 数据,设置和获取数据
   * @param data
   * @returns {*|number}
   */
  data: function (data) {
    if (data) {
      this._data = data;
    }
    return this._data;
  },

  /**
   * 更新配置
   * 优先级: config.colors > config.theme > this.config.theme > this.config.colors
   * [注] 有数组的配置一定要替换
   * @param config
   * @private
   */
  mergeConfig: function (config) {
    if (!config) {return this.config}
    this.config.theme = _.defaultsDeep(config.theme || {}, this.config.theme);
    this.setColors();
    this.config = _.defaultsDeep(config || {}, this.config);
    return this.config;
  },

  /**
   * 更新布局
   */
  updateLayout: function (width, height) {
    if (width && height) {
      this.container.css({
        'width': width + 'px',
        'height': height + 'px'
      });
    }
  },

  /**
   * 更新样式
   */
  updateStyle: function () {
    // 地图组件样式由高德地图API控制，这里可以添加自定义样式
  },

  /**
   * 绑定交互事件
   */
  bindEvents: function () {
    var self = this;
    
    // 监听外部事件
    this.on('mapLocate', function (data) {
      self.locateToPosition(data);
    });
    
    this.on('mapZoom', function (data) {
      self.setZoom(data.zoom);
    });
    
    this.on('mapCenter', function (data) {
      self.setCenter(data.center);
    });
    
    this.on('mapAddMarker', function (data) {
      self.addMarker(data);
    });
    
    this.on('mapClearMarkers', function () {
      self.clearMarkers();
    });
  },


  /**
   * 定位到指定坐标
   * @param {Object} data - 定位数据 {lng: 经度, lat: 纬度, zoom: 缩放级别}
   */
  locateToPosition: function (data) {
    if (!this.map) return;
    
    var lng = data.lng || data.longitude;
    var lat = data.lat || data.latitude;
    var zoom = data.zoom || this.map.getZoom();
    
    // 验证坐标有效性
    if (isNaN(lng) || isNaN(lat)) {
      console.error('无效的坐标:', data);
      return;
    }
    
    var center = [parseFloat(lng), parseFloat(lat)];
    
    // 设置地图中心点和缩放级别
    this.map.setCenter(center);
    if (zoom && !isNaN(zoom)) {
      this.map.setZoom(parseInt(zoom));
    }
    
    // 触发定位完成事件
    try {
      if (typeof this.emit === 'function') {
        this.emit('mapLocated', {
          center: center,
          zoom: this.map.getZoom()
        });
      }
    } catch (e) {
      console.log('定位完成事件触发失败:', e);
    }
  },

  /**
   * 设置地图中心点
   * @param {String|Array} center - 中心点坐标
   */
  setCenter: function (center) {
    if (!this.map) return;
    
    var centerCoords;
    if (typeof center === 'string') {
      centerCoords = center.split(',');
    } else if (Array.isArray(center)) {
      centerCoords = center;
    } else {
      console.error('无效的中心点格式:', center);
      return;
    }
    
    var lng = parseFloat(centerCoords[0]);
    var lat = parseFloat(centerCoords[1]);
    
    if (isNaN(lng) || isNaN(lat)) {
      console.error('无效的中心点坐标:', center);
      return;
    }
    
    this.map.setCenter([lng, lat]);
  },

  /**
   * 设置地图缩放级别
   * @param {Number} zoom - 缩放级别
   */
  setZoom: function (zoom) {
    if (!this.map) return;
    
    if (isNaN(zoom) || zoom < 3 || zoom > 18) {
      console.error('无效的缩放级别:', zoom);
      return;
    }
    
    this.map.setZoom(parseInt(zoom));
  },

  /**
   * 添加标记点
   * @param {Object} markerData - 标记点数据
   */
  addMarker: function (markerData) {
    if (!this.map) return;
    
    var position = markerData.position;
    if (typeof position === 'string') {
      var coords = position.split(',');
      position = [parseFloat(coords[0]), parseFloat(coords[1])];
    }
    
    if (isNaN(position[0]) || isNaN(position[1])) {
      console.error('无效的标记点坐标:', markerData.position);
      return;
    }
    
    var AMap = window.AMap;
    var marker = new AMap.Marker({
      position: position,
      title: markerData.title || '',
      content: markerData.content || ''
    });

    // 添加信息窗口
    if (markerData.title || markerData.content) {
      var infoWindow = new AMap.InfoWindow({
        content: '<div style="padding: 10px;"><h4>' + (markerData.title || '') + '</h4><p>' + (markerData.content || '') + '</p></div>',
        offset: new AMap.Pixel(0, -30)
      });

      var self = this;
      marker.on('click', function () {
        infoWindow.open(self.map, position);
      });
    }

    marker.setMap(this.map);
    this.markers.push(marker);
  },

  /**
   * 飞行至某地
   * @param {Object} data - 飞行数据 {lng: 经度, lat: 纬度, zoom: 缩放级别}
   */
  flyTo: function (data) {
    if (!this.map) return;
    
    var lng = data.lng;
    var lat = data.lat;
    var zoom = data.zoom || this.map.getZoom();
    
    // 验证坐标有效性
    if (isNaN(lng) || isNaN(lat)) {
      console.error('无效的坐标:', data);
      return;
    }
    
    var center = [parseFloat(lng), parseFloat(lat)];
    
    // 使用高德地图的飞行动画
    this.map.setZoomAndCenter(parseInt(zoom), center);
    
    console.log('飞行至:', center, '缩放级别:', zoom);
  },

  /**
   * 显示地图组件
   */
  show: function () {
    this.container.show();
    if (this.map) {
      this.map.getSize();
    }
  },

  /**
   * 隐藏地图组件
   */
  hide: function () {
    this.container.hide();
  },

  /**
   * 销毁组件
   */
  destroy: function () {
    if (this.map) {
      this.map.destroy();
      this.map = null;
    }
    this.clearMarkers();
    this.container.empty();
  }
});